<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>订单管理</title>
    <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>
<body>

<div th:replace="~{nav :: nav('订单管理')}"></div>
<div th:replace="~{header :: header}"></div>
<div class="margin-helper">
    <div class="samoyed-content">
        <div th:replace="~{pageHead :: pageHead(pageName='订单管理', parentMenu='菜单导航')}"></div>
        <div id="page-content" class="page-content" v-cloak>

            <el-container>
                <el-main>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%; min-height: 500px"  :row-style="rowStyle">
                        <el-table-column type="expand">
                            <template slot-scope="tableData">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="备注"><span>{{ tableData.row.orderComment }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column

                                label="订单编号"
                                width="180">
                            <template slot-scope="scope">
                                <el-button  @click="dialogTableShow(scope.row.orderId)"  type="text" size="small">{{ scope.row.orderId }}</el-button>

                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="user.userShopName"
                                label="商店名称"
                                width="280">
                        </el-table-column>
                        <el-table-column
                                prop="orderDateTime"
                                label="下单时间"
                                width="260">
                        </el-table-column>
                        <el-table-column

                                label="是否发货"
                                width="120">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.orderIsSend==1?'已发货':'未发货' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column

                                label="是否有效"
                                width="120">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.orderIsValid==1?'有效':'无效' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="orderTotalPrice"
                                label="总价"
                                width="120">
                        </el-table-column>

                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button  @click="dialogTableShow(scope.row.orderId)"  type="text" size="small">查看</el-button>
                                <el-button type="text" @click="handleDrop(scope.row.orderId)" size="small">作废</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="total">
                    </el-pagination>

                    <el-dialog title="" :visible.sync="dialogTableVisible">
                        <div id="subOutputRank-print" style="border: 1px solid gainsboro">
                         <div  style=" margin:0 auto; text-align:center; font-size: 20px ; font-weight: bold"><el-span style="letter-spacing: 4px">{{orderShopName}}采购清单</el-span></div>
                       <div>
                           <div style="width: 50%;float: left">
                               <div>订单编号：{{order.orderId}}</div>
                               <div style="color: orangered;">是否发货：{{order.orderIsSend==1?'已发货':'否'}}</div></td>

                           </div>

                           <div style="width: 50%;float: right">
                               <div>订单时间：{{order.orderDateTime}}</div>
                               <div  style="color: orangered; font-weight: bold">备注：{{order.orderComment}}</div>
                          </div>
                       </div>
                        <el-table :data="gridData" style="border: 1px solid gainsboro;border-right: none;border-left: none;cellspacing:0;cellpadding:0;">
                            <el-table-column prop="product.productName" label="商品名称"></el-table-column>
                            <el-table-column prop="product.productCode" label="条码" ></el-table-column>
                            <el-table-column prop="product.productStandard" label="规格" ></el-table-column>
                            <el-table-column prop="detailProductCount" label="数量" ></el-table-column>
                            <el-table-column prop="detailProductUnit" label="单位"></el-table-column>
                            <el-table-column prop="detailProductPrice" label="单价"></el-table-column>
                            <el-table-column prop="detailTotalPrice" label="总价"></el-table-column>
                            <el-table-column prop="detailComment" label="备注" ></el-table-column>
                        </el-table>
                        <el-span style="line-height: 35px">订单总价：{{order.orderTotalPrice}}</el-span>


                    </div>
                        <div>

                            <el-span style="line-height: 50px"> <el-button  v-if="order.orderIsSend==0" type="primary" @click="send">发货</el-button></el-span>


                        </div>
                      <!--  <el-button type="primary"  @click="exportOrder()">导出<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>
                        <el-button type="primary"  @click="printContent()">打印订单</el-button>-->
                    </el-dialog>


                </el-main>
            </el-container>

        </div>
    </div>
</div>

<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script src="../../static/js/config.js" th:src="@{/static/js/config.js}"></script>

<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>

<!-- 引用vue组件相关的js文件 -->
<div th:replace="~{nav :: vue('订单管理')}"></div>
<div th:replace="~{header :: vue}"></div>
<script>

    var vue =new Vue({
        el: '#page-content',
        data:{
            tableData: '',
            pageNum:1,
            pageSize:8,
            total:0,
            web_static_server:_global_web_server+"/static/",
            dialogTableVisible:false,
            gridData: [],
            file:"",
            order:{
            }   //表示当前订单
            ,
            orderShopName:''
        },

        methods:{
            dateFormat:function(time) {
                var date=new Date(time);
                var year=date.getFullYear();
                var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
                var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
                var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
                var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
                var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
                // 拼接
                return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
            },
            rowStyle:function (scope) {

                if(scope.row.orderIsSend==1){
                    return  'background-color:#D1EEEE';
                }
                return 'background-color: '

            },

            init:function () {
                var url=_global_web_server +"/order/list";
                var _self=this;
                axios.get(url,{
                    params:{
                        pageNum:_self.pageNum,
                        pageSize:_self.pageSize
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    var  pageInfo =jsonResult.data;
                    _self.tableData=pageInfo.list;
                    _self.total=pageInfo.total;

                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            handleCurrentChange:function (value) {
                this.pageNum=value;
                this.init();
            },
            handleDrop:function (id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function(){
                    var url=_global_web_server +"/order/invalid";
                    var _self=this;
                    axios.get(url,{
                        params:{
                            orderid:id
                        }
                    }).then(function (response) {
                        var  jsonResult=response.data;
                        if(jsonResult.status=="200"){
                            window.location.reload();
                        }else{
                            alert(jsonResult.message);
                        }

                    }).catch(function (reason) {
                        alert("请求异常");
                    });


                }).catch(function() {

                });
            },
            dialogTableShow:function (id) {
                var _self=this;
                this.dialogTableVisible=true;
                var url=_global_web_server +"/order/detail";
                var url2=_global_web_server +"/order/qyrOderById";

                axios.get(url,{
                    params:{
                        orderid:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    _self.file=JSON.stringify(jsonResult);
                    _self.gridData=jsonResult.data;


                }).catch(function (reason) {
                    console.log(reason);
                });
                //查询订单
                axios.get(url2,{
                    params:{
                        orderid:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    _self.order=jsonResult.data;
                    //alert(JSON.stringify(_self.order));
                    if(jsonResult.data.user!=null ){
                            _self.orderShopName=jsonResult.data.user.userShopName;
                    }else{
                        _self.orderShopName="";
                    }
                }).catch(function (reason) {
                    console.log(reason);
                });





            },
            orderListShow:function (id) {

            },
            send:function () {


                var _self=this;
                var url=_global_web_server +"/order/send";


                axios.get(url,{
                    params:{
                        orderid:_self.order.orderId
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if(jsonResult.status==200){
                            _self.order.orderIsSend=1;
                    }


                }).catch(function (reason) {
                    console.log(reason);
                });


            },


            exportOrder:function () {
               /* var _self=this;
                this.dialogTableVisible=true;
                var url=_global_web_server +"/order/down";
                axios.get(url,{
                    params:{
                        files:_self.file
                    }
                }).then(function (response) {


                }).catch(function (reason) {
                    console.log(reason);
                });*/
            }

        }
    });
    vue.init();


</script>

</body>

</html>